<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>论坛</title>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="../bootstrap/js/jquery-3.1.0.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <style type="text/css">
        body{
            background-color: #eee;
        }
        mark{
            background-color: #eee;
            border-radius: 2px;
        }
        a:hover{
            text-decoration: none;
            cursor: pointer;
        }
        .bg-white{
            background-color: #fff;
        }

        .disco-topic a{
            position: relative;
            display: inline-block;
            margin-left: 30px;
            padding: 7px 0;
            color: #666;
        }
        .disco-topic a.selected:after{
            content: "";
            position: absolute;
            bottom: -6px;
            left: 50%;
            border-width: 6px 6px 0 6px;
            border-color: #fff transparent;
            border-style: solid;

        }
        .disco-topic a.selected{
            color: #000;
        }

        .main-cap{
            position: relative;
            margin: 0px -15px;
            padding: 0px 10px;
            border-bottom: 1px solid #ccc;
        }
        .main-cap a{
            color: #666;
            font-weight: 600;
        }
        .col-md-9{
            border-right: 1px solid #ccc;
        }
        .nav-item{
            position: absolute;
            bottom: 0;
            right: 0;
        }
        .nav-item li{
            float: right;
        }
        .nav-item li a{
            padding-top: 5px;
            padding-bottom: 5px;
            border-bottom: 2px solid transparent;
        }
        .nav-item li.active a{
            border-bottom: 2px solid #00f;
        }
        .topics{
            padding: 0px 10px;
        }
        .topics dl{
            margin: 0;
            padding: 20px 0px;
            border-bottom: 1px solid #eee;
        }
        .topics dl dt{
            width: 40px;
            height: 40px;
        }
        .topics dl dd{
            margin-left: 60px;
        }
        .topic-author{
            color: #000;
        }
        .topic-stat{
            color: #aaa;
        }
        .user-info{
            margin: 0;
            padding: 10px 0px;
        }
        .user-info dt{
            width: 40px;
            height: 40px;
        }
        .user-info dd{
            margin-left: 60px;
        }
    </style>
</head>
<body>
    <div style="background-color: #fff;margin-bottom: 30px;padding: 10px 0px" >
        <div class="container pad clearfix">
            <div class="has-feedback pull-left">
                <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status" placeholder="搜索问题、话题或人">
                <span class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></span>
                <span id="inputSuccess2Status" class="sr-only">(success)</span>
            </div>
            <div class="pull-left disco-topic">
                <a class="selected"><span class="glyphicon glyphicon-search"></span>&nbsp;发现</a>
                <a><span class="glyphicon glyphicon-envelope"></span>&nbsp;话题</a>
            </div>
            <div class="pull-right">
                <button class="btn btn-primary">登录</button>
                <button class="btn btn-primary">注册</button>
            </div>
        </div>
    </div>
    <div>
        <div class="container">
            <div class="row bg-white">
                <div class="col-sm-12 col-md-9">
                    <div class="main-cap hidden-xs">
                        <a style="font-size: 1.5em;line-height: 3em;"><span class="glyphicon glyphicon-search"></span>&nbsp;发现</a>
                       <ul class="nav nav-item">
                           <li><a>等待回复</a></li>
                           <li><a>热门</a></li>
                           <li><a>推荐</a></li>
                           <li class="active"><a>最新</a></li>
                       </ul>
                    </div>
                    <div class="topics">
                        <dl class="dl-horizontal">
                            <dt><img src="images/avatar-max-img.png" class="img-responsive"></dt>
                            <dd>
                                <a>BAE部署node.js ghost博客系统</a><br>
                                <small><mark class="topic-catalog">默认分类</mark> <span class="topic-author">• 难寻芳踪</span> <span class="topic-stat">发起了问题 • 1 人关注 • 0 个回复 • 50 次浏览 • 2 天前</span></small>
                                <span class="pull-right small">回复</span>
                            </dd>
                        </dl>
                        <dl class="dl-horizontal">
                            <dt><img src="images/avatar-max-img.png" class="img-responsive"></dt>
                            <dd>
                                <a>BAE部署node.js ghost博客系统</a><br>
                                <small><mark class="topic-catalog">默认分类</mark> <span class="topic-author">• 难寻芳踪</span> <span class="topic-stat">发起了问题 • 1 人关注 • 0 个回复 • 50 次浏览 • 2 天前</span></small>
                                <span class="pull-right small">回复</span>
                            </dd>
                        </dl>
                        <dl class="dl-horizontal">
                            <dt><img src="images/avatar-max-img.png" class="img-responsive"></dt>
                            <dd>
                                <a>BAE部署node.js ghost博客系统</a><br>
                                <small><mark class="topic-catalog">默认分类</mark> <span class="topic-author">• 难寻芳踪</span> <span class="topic-stat">发起了问题 • 1 人关注 • 0 个回复 • 50 次浏览 • 2 天前</span></small>
                                <span class="pull-right small">回复</span>
                            </dd>
                        </dl>
                    </div>
                </div>
                <div class="hidden-sm col-md-3">
                    <br>
                    <div class="clearfix">
                        <span class="pull-left">热门话题</span>
                        <span class="pull-right"><a>更多>></a></span>
                    </div>
                    <dl class="dl-horizontal user-info">
                        <dt>
                            <a><img src="images/topic-mid-img.png" class="img-responsive"> </a>
                        </dt>
                        <dd>
                            <mark>bae</mark><br>
                            <span>3个问题，1人关注</span>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</body>
</html>